Conversation
|
@dlousa92 Are you unable to simply insert |
|
I might be able to do that with an AJAX request. Researching now. |
|
Here is the code as I have it now. |
| icon: 'editor-code', | ||
| title: 'Aircraft Shortcode', | ||
| onClick: function() { | ||
| props.onChange( wp.richText.toggleFormat( |
There was a problem hiding this comment.
I know this is where I need to call the shortcode to run when a user clicks on the format button. I just don't know how to actually reference that shortcode from this js file.
There was a problem hiding this comment.
Thanks for digging into this!
I think part of where the confusion lies is that what we're actually trying to do is different than what the toggleFormat method does (that just happened to be what the tutorial was about). I went and looked at the richText package and there is an insert method that seems more in line with what it is we're actually trying to do, which is insert a string [aircraft] into the post.
There isn't a lot of documentation or examples out there on this, so you might have to dig a little bit to find an existing example or you'll have to figure it out from trial and error. I did find in the Gutenberg codebase the code they use for inserting a line break, which might be similar enough that you can use it for reference. Here are a few other articles I found that might point you in the right direction:
|
It works! |
2 participants
The first two steps in issue #54 are completed. I've been looking into methods of making the bomber icon shortcode available in the toolbar.
I'm able to add a button into the toolbar using the format API so that's awesome! Screenshot below,
However the biggest hurdle I'm having right now is how to add the shortcode into that button. There's a few methods in rich-text that are possible to use, linked here. I've been experimenting with applyFormat and toggleFormat. These do work in the sense that I'm able to insert code that's similar to the shortcode as per the screenshot below,
The main problem is I'm unable to set an src link to the image using these methods. I can set a background url for this element with the bomber image in css, however I know that's kind of hacky.
Another possible solution I've found is that perhaps it's possible to create a Gutenberg block that would be the bomber icon and then making this block inline with css. Here is a link to an issue on the gutenberg repository that references this.